Оптимизация сайта под мобильные устройства - руководство

Даже учитывая то, что у многих телефонов есть возможность отображать страницы сайта в полном размере, оптимизация его под этот стандарт должна быть. Это несколько лет назад оптимизировать сайт под мобильные устройства было головной болью, сегодня же, отчасти, благодаря распространению WebKit (движок, служащий для отображения веб-страниц, включен в браузеры на iPhone, Android и WebOS, ожидается, что BlackBerry установит его и себе в ближайшее время), оптимизировать сайт гораздо легче.

Это статья – некий справочник для тех, кто хочет сделать мобильную версию своего сайта. Кстати, наткнулся сегодня на отличное предложение аренды выделенный сервер, может кого-то заинтересовало.

Сервисы для быстрого создания мобильной версии сайта

Если у вас нет опыта работы с HTML и CSS (или у вас нет времени), есть целый список сервисов, с помощью которых можно быстро создать мобильную версию веб-сайта.

MoFuse и MoFuse Premium – позволяет владельцам сайтов с легкостью создать мобильную версию за небольшой промежуток времени. MoFuse – бесплатный и простой способ быстро создать мобильную версию сайта (для создания мобильной версии берется информация из RSS-канала, если он доступен по адресу «m.yourdomain.com»). Для коммерческих сайтов и больших порталов, которые хотят использовать больше параметров при настройках, существует MoFuse Premium.

Кстати сказать, мобильная версия популярного сайта mashable.com сделана именно с помощью этого сервиса.

Mippin - бесплатный сервис, позволяющий создать мобильную версию сайта, при этом используется информация из вашего RSS-канала. Настроек мало, но зато ваш сайт будет работать практически на любом WAP-совместимом телефоне.

mobiSiteGalore - еще один сервис с несколькими вариантами настройки.

Плагины для WordPress и других CMS

Если ваш сайт оптимизирован под WAP-формат – это хорошо. Но чтобы иметь возможность предложить пользователям iPhone или Android больше возможностей, можно использовать специальные плагины для WordPress и для других CMS (позволяют создавать даже отдельные таблицы стилей). Есть много плагинов, которые я бы и хотел перечислить:

WPtouch – фантастический плагин, доступный пользователям WordPress.org, с помощью которого можно автоматически создать мобильную версию сайта.

Плагин очень надежен, из его особенных функций можно выделить:

• возможность установить iPhone Favicon
• умение работать с другими плагинами WordPress, такими как FlickrRSS и Blip.it
• поддерживает AJAX

Но больше всего в WPtouch мне нравится то, что пользователь может сам выбрать, какую версию сайта он хочет просматривать. В любой момент он может переключиться на полную версию сайта, воспользовавшись соответствующей кнопкой в низу каждой страницы.

WordPress Mobile Edition – плагин, который позволяет настроить, какую версию сайта отображать пользователю – мобильную или полную, в зависимости от его типа устройства (к примеру, вы хотите чтобы пользователи BlackBerry видели мобильную версию сайта, а пользователи iPhone - полную). Кроме того, предлагает приятные и легко настраиваемые темы.

WordPress Mobile Pack – целый набор инструментов для оптимизации сайта под мобильные устройства. Включает в себя большое количество разнообразных тем, мобильные админ-панели, поддержка обновлений, а также позволяет пользователю переключаться между полной и мобильной версией сайта.

WPtap – плагин для WordPress, который также предлагает различные темы для мобильной версии сайтов. WPtap очень похож на WPtouch, на акцент, кажется, больше сделан на предложение готовых шаблонов.

WordPress Mobile от Mobify – плагин для сервиса Mobify, который позволяет сделать автоматическое перенаправление мобильных браузеров на мобильную версию сайта.

Mobile Plugin для Drupal – позволяет создать мобильную версию сайта с одним из стандартных шаблонов и обладает некоторыми дополнительными функциями.

OSMOBI - сервис и плагин для Joomla и Drupal, который, также как и остальные сервисы, позволяет настроить мобильную версию сайта. Сервис работает бесплатно для тех, у кого количество просмотров не превышает 150 в сутки, больше - платно.

Инструменты для дизайнеров

Mobify - действительно интересный сервис, который позволяет людям, владеющим HTML и CSS, удобно изменять и оптимизировать сайт под мобильные устройства. Сервис бесплатный (но для доступа ко всем возможностям нужно платить абонентскую плату). С помощью этого сервиса очень удобно работать с такими системами, как WordPress, Drupal, ExpressionEngine и другими, в которых схемы URL-адресов предсказуемые и в которых хорошо сформирован HTML код. Mobify имеет визуальный редактор, с помощью которого можно увидеть, как будет выглядеть ваш сайт с различных устройств, при этом CSS можно изменять прямо в режиме просмотра.

iWebKit – еще один сервис, позволяющий создать мобильную версию сайта или приложения, который позволяет для пользователей iPhone расширить некоторые возможности.

jQTouch – инновационный JQuery плагин для разработчиков приложений для iPhone и IPod Touch. С помощью него можно создавать анимацию, он поддерживает различные формы, есть возможность подгонять элементы пользовательского интерфейса, есть дополнительные расширения. Проект развивается и с его помощью можно сделать действительно удивительные вещи.

Совместимые с iPhone CSS слои - Мэтью Джеймс Тейлор создал большое количество CSS макетов, совместимых с iPhone и IPod Touch, при этом использовать их можно абсолютно бесплатно. Если вы не знаете, с чего начать – можно просто использовать эти наработки.

Что вы думаете о развитии мобильного интернета? Пользуетесь ли вы интернетом с мобильного? Дайте нам знать!

Компания SERENETI предлагает разработку и продвижение сайта - быстро в топ.